<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

</head>
<body>
<div id="app">
    <div>
        <span v-text="user"></span>
        <span v-text="score"></span>
        <span v-if="score>80">优秀</span>
        <span v-else-if="score>60">良好</span>
        <span v-else=>不及格</span>
    </div>

</div>
<script type="text/javascript">
    /*
    0-60   不及格
    60--80  良好
    80-100  优秀
    vue中的条件判断语句：根据不同的条件显示不同的内容
    v-if
    v-else-if
    v-else:

    */
    var vue = new Vue({
        el: "#app",
        data: {
            stus: [
                {name: '木森', score: 100},
                {name: '盼盼达', score: 78},
                {name: '好好先生', score: 89},
                {name: '枫', score: 99},
            ],
            score: 88,
            user: 'musen'
        }

    })


</script>


</body>
</html>
